<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" href="css/style.css">
	    <script src="js/scroll.js"></script>
    </head>
    <body>
		<div class="main" id="main">
			<div class="catalogue"><a href="home.html"><img src="image/home.png" alt=""></a></div>
			<div class="label-title"></div>
			<!-- 杂志大图 -->
			<div id="flipbook" class="flipbook" style="margin: 0 auto;">
				
			</div>
			<div class="skip">
				<a class="first" href="javascript:void(0);">回到首页</a>
				<a class="prev" href="javascript:void(0);">上一页</a>
				<span id="page-number">1</span>/<span id="number-pages"></span>
				<a class="next" href="javascript:void(0);">下一页</a>
				<a class="end" href="javascript:void(0);">跳至尾页</a>
			</div>
			<div class="tool">
                <a href="javascript:void(0);" class="prev"><img src="image/left.png" alt=""></a>
				<a href="javascript:void(0);" class="next"><img src="image/right.png" alt=""></a>
			</div>
			<!-- 缩略小图 -->
			<div class="breviary">
				<div></div>
			</div>
		</div>
		
        <script>
            if (document.documentElement.clientWidth > 500) {
                document.documentElement.style.fontSize = 80 + 'px'
            } else {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
            }
        </script>
		<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
		<script src="js/turn.js"></script>
		<script src="js/zoom.min.js"></script>
		<script type = "text/javascript">
		    //修改微信内置浏览器顶部title
			document.setTitle = function(t) {
			document.title = t;
			var i = document.createElement('iframe');
			i.src = '//m.baidu.com/favicon.ico';
			i.style.display = 'none';
			i.onload = function() {
				setTimeout(function(){
				i.remove();
				}, 9)
			}
			    document.body.appendChild(i);
			}
			
			setTimeout(function(){
			    document.setTitle(GetRequest().name);
			}, 1);

			var numberOfPages = 20;//设置总页数
			$('#number-pages').html(numberOfPages);

			//获取url传过来参数
			function GetRequest() {
				var url = decodeURI(decodeURI(location.search)); //获取url中"?"符后的字串  
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					strs = str.split("&");
					for(var i = 0; i < strs.length; i ++) {
						theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			}

		    console.log('传参数',GetRequest())
	        
			//传到数据库获取对应的某一期杂志的图片
			var id = GetRequest().id
			var title = GetRequest().title
			$('.label-title').html(title)
			console.log('传参',id)
			console.log('传参',title)

			if (id == 1) {
				var imglist = ['image/0001.jpg','image/0002.jpg','image/0003.jpg','image/0004.jpg','image/0005.jpg','image/0006.jpg','image/0007.jpg','image/0008.jpg','image/0009.jpg','image/0010.jpg','image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg','image/5.jpg','image/6.jpg','image/7.jpg','image/8.jpg','image/9.jpg','image/10.jpg']
			} else {
				var imglist = ['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg','image/5.jpg','image/6.jpg','image/7.jpg','image/8.jpg','image/9.jpg','image/10.jpg','image/0001.jpg','image/0002.jpg','image/0003.jpg','image/0004.jpg','image/0005.jpg','image/0006.jpg','image/0007.jpg','image/0008.jpg','image/0009.jpg','image/0010.jpg']
			}

            //添加缩略图
			for(var i = 0;i < imglist.length;i++) {
				if (i == 0) {
					$('.breviary div').append('<img class="on" data-index="'+ (i+1) +'" src="'+ imglist[i] +'" alt="">')
				} else {
					$('.breviary div').append('<img data-index="'+ (i+1) +'" src="'+ imglist[i] +'" alt="">')
				}
			}
			
			//添加杂志翻页图片
			function addPage(page, book) {
				var id, pages = book.turn('pages');
				// Create a new element for this page
				var element = $('<div />', {});
				// Add the page to the flipbook
				if (book.turn('addPage', element, page)) {
					// Add the initial HTML
					// It will contain a loader indicator and a gradient
					element.html('<div class="loader"></div>');
					// Load the page
					loadPage(page, element);
				}
			}

			function loadPage(page, pageElement) {
				// Create an image element
				var img = $('<img />');
				img.mousedown(function(e) {
					e.preventDefault();
				});
				img.load(function() {
					// Set the size
					$(this).css({width: '100%', height: '100%'});
					// Add the image to the page after loaded
					$(this).appendTo(pageElement);
					// Remove the loader indicator
					pageElement.find('.loader').remove();
				});
				// Load the page
				// img.attr('src', 'pages/' +  page + '.jpg');
				img.attr('src', imglist[page-1]);
			}

			$("#flipbook").turn({
				display: 'single',
				autoCenter: true,
				acceleration: true,
				elevation: 50,
				gradients: true,
				pages: numberOfPages,
				duration: 1000,
				when: {
					turning: function (e, page, view) {
						$('.breviary').find('img').eq(page-1).addClass('on').siblings().removeClass('on')
						$('#page-number').html(page);

						if(0 < $('.breviary').find('img.on').position().left < $('.breviary').width()) {
							console.log('不滑动')
						}
				
						if($('.breviary').find('img.on').position().left  > $('.breviary').width()) {
							console.log('向左滑动一定距离')
							$('.breviary div').scrollLeft((($('.breviary').find('img.on').position().left - $('.breviary').width())* page)+9)
						}
						
						console.log('滚动区总宽度',$('.breviary').width())
						console.log('距离左边距离',$('.breviary').find('img.on').position().left)
						
						if ($('.breviary').find('img.on').position().left < $('.breviary').width() && $('.breviary').find('img.on').position().left < 0) {
							$('.breviary div').scrollLeft($('.breviary').find('img.on').position().left)
						}
						console.log('第几个',page)
					},

					turned: function (e, page) {
						$(this).turn('peel','br');
					},
					missing: function (event, pages) {
						// Add pages that aren't in the magazine
						//添加杂志中的页面
						for (var i = 0; i < pages.length; i++)
							addPage(pages[i], $(this));	
					}
				}
			});

			//上一页
			$(".prev").bind("touchend", function () {
				var pageCount = $(".flipbook").turn("pages");//总页数
				var currentPage = $(".flipbook").turn("page");//当前页
				if (currentPage >= 2) {
					$(".flipbook").turn('page', currentPage - 1);
				} else {
				}
			});
			// 下一页
			$(".next").bind("touchend", function () {
				var pageCount = $(".flipbook").turn("pages");//总页数
				var currentPage = $(".flipbook").turn("page");//当前页
				if (currentPage <= pageCount) {
					$(".flipbook").turn('page', currentPage + 1);
				} else {
				}
			});
			//首页
			$(".first").bind("touchend", function () {
				var pageCount = $(".flipbook").turn("pages");//总页数
				var currentPage = $(".flipbook").turn("page");//当前页
				if (currentPage <= pageCount) {
					$(".flipbook").turn('page', 1);
				} else {
				}
			});
			//尾页
			$(".end").bind("touchend", function () {
				var pageCount = $(".flipbook").turn("pages");//总页数
				var currentPage = $(".flipbook").turn("page");//当前页
				if (currentPage <= pageCount) {
					$(".flipbook").turn('page', 20);
				} else {
				}
			});
            //缩略图切换
			$('.breviary').find('img').click(function() {
				var index = $(this).data('index')
				console.log('index',index)
				$(".flipbook").turn('page', index);
			})
		</script>
		<script>
			$('.main').zoom({
				flipbook: $('.flipbook'),
				max: function() { 
					return largeMagazineWidth()/$('.flipbook').width();
				},
				when: {
					swipeLeft: function() {
						console.log('向左滑动')
						// $(this).zoom('flipbook').turn('prev');
					},
					swipeRight: function() {
						console.log('向右滑动')
						// $(this).zoom('flipbook').turn('next');
					},
					resize: function(event, scale, page, pageElement) {
						if (scale==1)
							loadSmallPage(page, pageElement);
						else
							loadLargePage(page, pageElement);
					},

					zoomIn: function () {
						$('.breviary').hide();
						$('#controls').hide();
						$('.label-title').hide();
						$('.skip').hide();
						$('.tool').hide();
						$('.flipbook').removeClass('animated')
						// $('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
					},

					zoomOut: function () {
						$('.breviary').fadeIn();
						$('#controls').fadeIn();
						$('.label-title').fadeIn();
						$('.skip').fadeIn();
						$('.tool').fadeIn();
						// $('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
						setTimeout(function(){
							$('.flipbook').addClass('animated')
							resizeViewport();
						}, 0);
					}
				}
			});

			// // Zoom event
			if ($.isTouch)
				$('.main').bind('zoom.doubleTap', zoomTo);
			else
				$('.main').bind('zoom.tap', zoomTo);

            //获取杂志最大宽度
			function largeMagazineWidth() {
				return 600;
			}

			// 加载大图
			function loadLargePage(page, pageElement) {
				var img = $('<img />');
				img.load(function() {
					var prevImg = pageElement.find('img');
					$(this).css({width: '100%', height: '100%'});
					$(this).appendTo(pageElement);
					prevImg.remove();
				});
				// Loadnew page
				img.attr('src', imglist[page-1]);
			}
			// 加载小图
			function loadSmallPage(page, pageElement) {
				var img = pageElement.find('img');
				img.css({width: '100%', height: '100%'});
				img.unbind('load');
				// Loadnew page
				img.attr('src', imglist[page-1]);
			}

			// Zoom in / Zoom out
			function zoomTo(event) {
				// setTimeout(function() {
					if ($('.main').data().regionClicked) {
						$('.main').data().regionClicked = false;
					} else {
						if ($('.main').zoom('value')==1) {
							$('.main').zoom('zoomIn', event);
						} else {
							$('.main').zoom('zoomOut');
						}
					}
				// }, 1);
			}

			$(window).resize(function() {
				resizeViewport();
			}).bind('orientationchange', function() {
				resizeViewport();
			});

			function resizeViewport() {
				var width = $(window).width(),
					height = $(window).height(),
					options = $('.flipbook').turn('options');
				$('.flipbook').removeClass('animated');
				$('.main').css({
					width: width,
					height: height
				}).
				zoom('resize');

				if ($('.flipbook').turn('zoom')==1) {
					var bound = calculateBound({
						width: options.width,
						height: options.height,
						boundWidth: Math.min(options.width, width),
						boundHeight: Math.min(options.height, height)
					});
					if (bound.width%2!==0)
						bound.width-=1;
						
					if (bound.width!=$('.flipbook').width() || bound.height!=$('.flipbook').height()) {

						$('.flipbook').turn('size', bound.width, bound.height);

						if ($('.flipbook').turn('page')==1)
							$('.flipbook').turn('peel', 'br');
						// $('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
						// $('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
					}
					$('.flipbook').css({top: 0, left: 0});
				}

				var magazineOffset = $('.flipbook').offset(),
					boundH = height - magazineOffset.top - $('.flipbook').height();
					// marginTop = (boundH - $('.thumbnails > div').height()) / 2;

				// if (marginTop<0) {
				// 	$('.thumbnails').css({height:1});
				// } else {
				// 	$('.thumbnails').css({height: boundH});
				// 	$('.thumbnails > div').css({marginTop: marginTop});
				// }

				// if (magazineOffset.top<$('.made').height())
				// 	$('.made').hide();
				// else
				// 	$('.made').show();

				$('.flipbook').addClass('animated');
			}

			function calculateBound(d) {
				var bound = {width: d.width, height: d.height};
				if (bound.width>d.boundWidth || bound.height>d.boundHeight) {
					var rel = bound.width/bound.height;
					if (d.boundWidth/rel>d.boundHeight && d.boundHeight*rel<=d.boundWidth) {
						bound.width = Math.round(d.boundHeight*rel);
						bound.height = d.boundHeight;
					} else {
						bound.width = d.boundWidth;
						bound.height = Math.round(d.boundWidth/rel);
					}
				}
				return bound;
			}
		</script>
    </body>
</html>